import { SafeArea } from 'antd-mobile'
import { connect } from "react-redux"
import { useNavigate, useLocation } from 'react-router-dom'
import styles from './index.module.less'

const FooterNav = ({ notificationUnread }) => {
    const navigate = useNavigate();
    const location = useLocation()
    const { pathname } = location
    
    // 所有页面都使用统一的底部导航样式
    return (
        <div className={styles.footerContainer}>
            <footer className={styles.bottomNav}>
                <a className={`${styles.navItem} ${pathname === '/home' ? styles.active : ''}`} onClick={() => navigate('/home')}>
                    <span className={styles.navIcon}>dashboard</span>
                    <span className={styles.navText}>智能广场</span>
                </a>
                <a className={`${styles.navItem} ${pathname === '/world' ? styles.active : ''}`} onClick={() => navigate('/world')}>
                    <span className={styles.navIcon}>apps</span>
                    <span className={styles.navText}>智能体库</span>
                </a>
                <a className={styles.addButton} onClick={() => navigate('/world/createPremiumCard?type=create')}>
                    <span className={styles.addIcon}>add</span>
                </a>
                <a className={`${styles.navItem} ${pathname === '/notifications' ? styles.active : ''}`} onClick={() => navigate('/notifications')}>
                    <span className={styles.navIcon}>notifications</span>
                    <span className={styles.navText}>系统通知</span>
                    {notificationUnread && <span className={styles.redDot}></span>}
                </a>
                <a className={`${styles.navItem} ${pathname === '/my' ? styles.active : ''}`} onClick={() => navigate('/my')}>
                    <span className={styles.navIcon}>person</span>
                    <span className={styles.navText}>个人中心</span>
                </a>
            </footer>
            <SafeArea position='bottom' />
        </div>
    )
}
const mapStateToProps = (state) => state.common;
export default connect(mapStateToProps)(FooterNav)